<!DOCTYPE html>
<meta charset=utf-8>
<script src="/js/jquery-1.10.2.js" type="text/javascript"></script>
<!--<script src="/js/jqueryui/ui/jquery.ui.core.js"></script>-->
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/js/jqueryui/themes/base/jquery.ui.all.css">
<script src="/js/cdr_table.js" type="text/javascript"></script>
<style type="text/css">

.resizable {padding: 0.5em; }
.resizable h3 { text-align: center; margin: 0; }

header, nav, footer, article {display:block;}
nav {float:left; width:20%;}
article {float:right; width:70%;}
footer {clear:both;text-align:center}
article div{float:none}
article div h1 ~ p {font-weight:bolder;color:red}
.hidden {
display:none;
}

.menu_item{
background-color:#E0E0E0;
pointer:hand;
margin:2px;
}
.menu_item:hover{
background-color:#ffffff;
}
.sub_menu{
position:relative;
left:1em;
}
header{
	text-align:center;
}
#svg{
	width:100px;
	height:100px;
}
</style>
<script type="text/javascript">
var websocket;
$(function(){
	/*$("div#item1").html("test test");
	$("nav a.button").click(function(evt){
		$.ajax({
			url:evt.target.href,
			context:$("#content"),
			dataType:"html"
		}).done(function(data){
			$(this).html(data);
		});
		evt.preventDefault();
	});*/
	$("nav .menu_p").click(function(evt){
		var sub_show = true;
		if($("+ div",evt.target).hasClass("hidden")){
			sub_show = false;
		}
		$("nav .sub_menu").addClass("hidden");
		if(sub_show == false){
			$("+ div",evt.target).removeClass("hidden");
		}
	});
	$("nav a.link").click(function(evt){
		var href = $(evt.target).attr("href");
		evt.preventDefault();
		$.ajax({
			url:href,
			dataType:"html",
			success:function(data){
				$("article#content").html(data);
			}
		});

	});
    $("#file_select #file_list").hide();
	$("#parse_pcap").click(function(evt){
        $("#file_select #file_list").toggle()
        if($("#file_select #file_list").is(":visible")){
            $.getJSON("scripts/html_cmd.yaws?module=injectpcap&method=list_file",function(data){
                $("#file_select #file_list").empty();
                $.each(data,function(i,item){
                    $("#file_select #file_list").append("<li>" + item + "</li>")
                        });
                $("#file_select #file_list li").click(function(evt){
                        var file_name = evt.target.innerText;
		                websocket = new WebSocket("ws://127.0.0.1:8181/scripts/html_cmd.yaws?module=injectpcap&method=do&params=" + file_name + ",html");
		                websocket.onopen = function(evt){console.log("opened websocket");}
		                websocket.onclose = function(evt){console.log("close websocket by server");}
		                websocket.onmessage = function(evt){append_cdr(evt.data);}
		                websocket.onerror = function(evt){console.log("unexpected error happen");}
		                evt.preventDefault();
	            });
            });
        }
    });
	cdr_table = $.cdr_table("div#cdr");
    ne_table = $.ne_table("div#node");
    $.getJSON("/scripts/get_server.yaws?server=ne",function(data){
        ne_table.setData(data);
    });
    $(".resizable").resizable().draggable();
});
var ne_table;
var cdr_table;
function append_cdr(data){
	if(data != undefined){
		cdr = $.parseJSON(data);
		//$("table#evt tbody").append(cdr);
		cdr_table.insert(cdr);
	}
}

</script>
<title Traffic Trace Engine></title>
<html>
<header> Traffic Trace Engine</header>
<body>
<nav>
<ul>
<li class="menu_p menu_item"> Protocol Static</li>
<div class="sub_menu hidden">
	<div class="menu_item">
	<a class="link" href="/scripts/get_server.yaws?server=GTP">
		GTP
	</a>
	</div>
	<div class="menu_item">
	<a class="link" href="/scripts/get_server.yaws?server=Radius">Radius</a>
	</div>
	<div class="menu_item">
	<a class="link" href="/scripts/get_server.yaws?server=HSS">
	HSS
	</a>
	</div>
</div>
<li class="menu_item"> Report </li>
<li class="menu_item"> Active CDR </li>
</ul>
</nav>
<article id="content">
<div id="item1" >
<div id="file_select">
    <button id="parse_pcap">Parse Pcap File...</button>
    <div id="file_list"></div>
</div>
</div>
<div id="cdr" class="ui-widget-content resizable">
<h3 class="ui-widget-header">CDR话单</h3>
<table id="evt">
</table>
</div>
<div id="node" class="ui-widget-content resizable">
    <h3 class="ui-widget-header">Network Element</h3>
<table id="network_element">

</table>
</article>
<footer>contact XXXXX</footer>



</body>
</html>
